<template>
  <el-dialog :visible="visible" custom-class="fullscreen-config-dialog" :show-close="false" center @close="handleClose">
    <div class="config-dialog-header">
      <div class="title">
        当前配置
        <el-tag size="mini" :type="displayIsDefault ? 'success' : 'info'" class="ml-2">
          {{ displayIsDefault ? '线上配置' : '线下配置' }}
        </el-tag>
      </div>
      <div class="subtitle">
        <i class="el-icon-time" /> 最后更新时间：{{ configUpdateTime || '无' }}
      </div>
    </div>

    <el-input v-model="editableConfig" type="textarea" :readonly="userRole !== 'admin'" resize="none"
      class="config-input" />

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="success" @click="$emit('copy')">
        <i class="el-icon-document-copy" /> 复制配置
      </el-button>
      <el-button type="primary" @click="handleToggleDefault">
        {{ displayIsDefault ? '查看离线配置' : '查看当前配置' }}
      </el-button>
      <el-button v-if="userRole === 'admin'" type="primary" :disabled="!displayIsDefault" @click="handlePush">
        <i class="el-icon-upload" /> 复推
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ConfigDialog',
  props: {
    visible: Boolean,
    configResult: String,
    configUpdateTime: String,
    userRole: String,
    isDefaultConfig: Boolean,
  },
  data() {
    return {
      editableConfig: this.configResult,
      displayIsDefault: true,
    };
  },
  watch: {
    configResult(newVal) {
      this.editableConfig = newVal;
    },
    visible(newVal) {
      if (newVal) {
        this.displayIsDefault = true;
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    handleToggleDefault() {
      const newStatus = !this.isDefaultConfig;
      this.$emit('changeDefault', newStatus);
      this.displayIsDefault = !this.displayIsDefault;
    },
    handlePush() {
      this.$emit('push', this.editableConfig);
    }
  }
};
</script>

<style>
.fullscreen-config-dialog {
  width: 100vw !important;
  height: 100vh;
  max-width: 1000px;
  margin: 0px auto !important;
  background-color: #fff;
  border-radius: 12px;
  padding: 1vw;
  overflow-y: auto;
}

.config-dialog-header .title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-dialog-header .subtitle {
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
}

.config-input .el-textarea {
  position: relative;
  height: 70vh;
  font-family: monospace;
  font-size: 13px;
  border: 1px solid #ddd;
  color: #333;
  padding: 0.5vh;
  border-radius: 6px;
  line-height: 1.6;
}

.config-input .el-textarea__inner {
  height: 68.5vh;
}
</style>
